<template>
  <view class="viewport">
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="报修维修工单"
      color="#fff"
      @leftClick="leftClick"
      @rightClick="rightClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
      <template v-slot:right>
        <fui-icon color="#fff" name="plus"></fui-icon>
      </template>
    </fui-nav-bar>

    <view class="warp">
      <view class="head">
        <view class="ipt">
          <u--input
            v-model="keyword"
            placeholder="请输入搜索关键词"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            @change="handleSearch"
          ></u--input>
        </view>
        <view class="screen" @click="screen">
          <image
            class="img"
            src="/static/images/index/shaixuan.svg"
            mode=""
          ></image>
          筛选
        </view>
      </view>

      <view class="port">
        <view
          class="ul"
          v-for="item in orderList"
          :key="item.id"
          @click="particulars(item.id)"
        >
          <view class="title">{{ item.repairSubject }}</view>
          <view class="li">
            <span class="left">工单单号</span>
            <span>{{ item.repairCode }}</span>
          </view>
          <view class="li">
            <span class="left">设备名称</span>
            <span>{{ item.deviceName }}</span>
          </view>
          <view class="li">
            <span class="left">设备编号</span>
            <span>{{ item.deviceCode }}</span>
          </view>
          <view class="li">
            <span class="left">存放位置</span>
            <span>{{ item.deviceLocation }}</span>
          </view>

          <view class="footer">
            <span>{{ item.createTime }}</span>
            <view class="audit" :style="getStatusStyle(item.status)">
              {{ getStatusText(item.status) }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted } from "vue";
import { getRepairOrderList } from "@/pages/api/subpkg_institution/repairworkorder.js";

const leftClick = () => {
  uni.reLaunch({
    url: "/pages/index/index",
  });
};

const rightClick = () => {
  uni.navigateTo({
    url: "/subpkg_institution/repairworkorder/add",
  });
};

const screen = () => {
  // 如果有现有的筛选条件，将其编码后传递
  const currentFilters = filterConditions.value;
  const queryString = currentFilters
    ? `?filters=${encodeURIComponent(JSON.stringify(currentFilters))}`
    : "";

  uni.navigateTo({
    url: `/subpkg_institution/repairworkorder/audit${queryString}`,
  });
};

//去详情页
const particulars = (id) => {
  uni.navigateTo({
    url: `/subpkg_institution/repairworkorder/particulars?id=${id}`,
  });
};

// 定义数据
const orderList = ref([]);
const total = ref(0);
const current = ref(1);
const size = ref(10);
const keyword = ref("");
// 添加筛选条件的响应式对象
const filterConditions = ref({});

// 状态映射
const STATUS_MAP = {
  1: { text: "待审核", color: "#FF9900" },
  2: { text: "驳回", color: "#FF0000" },
  4: { text: "待接单", color: "#0052D9" },
  5: { text: "已审批", color: "#00B42A" },
  6: { text: "待实施", color: "#FF9900" },
  7: { text: "实施中", color: "#0052D9" },
  8: { text: "待验收", color: "#722ED1" },
  9: { text: "已取消", color: "#86909C" },
  10: { text: "已完成", color: "#00B42A" },
};

// 获取状态文字
const getStatusText = (status) => {
  return STATUS_MAP[status]?.text || "未知状态";
};

// 获取状态样式
const getStatusStyle = (status) => {
  return {
    color: STATUS_MAP[status]?.color || "#86909C",
    borderColor: STATUS_MAP[status]?.color || "#86909C",
  };
};

// 获取工单列表
const getOrderList = async () => {
  try {
    const params = {
      current: current.value,
      size: size.value,
      repairCode: keyword.value,
      // 展开筛选条件
      ...filterConditions.value,
    };
    const res = await getRepairOrderList(params);
    if (res.code === 200) {
      orderList.value = res.data.records;
      total.value = res.data.total;
    }
  } catch (error) {
    console.error("获取工单列表失败：", error);
  }
};

// 搜索
const handleSearch = (value) => {
  keyword.value = value;
  current.value = 1;
  getOrderList();
};

// 监听筛选条件事件
const setupFilterListener = () => {
  uni.$on("filterConditions", (filters) => {
    console.log("收到筛选条件：", filters);
    // 更新筛选条件
    filterConditions.value = filters;
    // 重置页码
    current.value = 1;
    // 重新获取列表
    getOrderList();
  });
};

// 页面加载时获取数据和设置监听器
onMounted(() => {
  setupFilterListener();
  getOrderList();
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  uni.$off("filterConditions");
});
</script>

<style lang="scss" scoped>
.warp {
  height: 100%;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 150rpx;
  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 20rpx;

    .ipt {
      flex: 1;
      margin-left: 25rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .screen {
      // width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }
  .port {
    .ul {
      margin-top: 24rpx;
      background-color: #fff;
      padding: 0 30rpx;

      .title {
        color: #0052d9;
        font-size: 35rpx;
        font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
      }
      .li {
        color: #ccc;
        height: 50rpx;
        line-height: 50rpx;
        .left {
          color: #000;
          margin-right: 30rpx;
        }
      }
      .footer {
        display: flex;
        height: 80rpx;
        align-items: center;
        justify-content: space-between;
        .audit {
          border-radius: 25rpx;
          border: 1rpx solid;
          height: 48rpx;
          width: 120rpx;
          display: flex;
          font-size: 28rpx;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
